<template>
  <div
    class="mask"
    v-if="visible"
  >
    <div class="mask_dialog" :class="[dialogBg ? 'bg' : '']" :style="{ width, height }">
      <div class="mask_title">
        {{ title }}
        <i class="el-icon-close icon_close" @click="$emit('close')"></i>
      </div>
      <div class="mask_body clearfixed">
        <slot></slot>
      </div>
      <div class="mask_footer" v-if="buttonArray.length">
        <div class="btns">
          <button
            class="btn"
            :class="[index === buttonArray.length - 1 ? 'btn_bg m_l_10' : '']"
            v-for="(item, index) in buttonArray"
            :key="index"
            @click="btnClick(item)"

          >
            <i class="el-icon-loading loading_icon" v-if="item.loading"></i>
            {{ item.text }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    dialogBg: {
      type: Boolean,
      default: false,
    },
    visible: {
      type: Boolean,
      default: false,
    },
    width: {
      type: String,
      default: ''
    },
    height: {
      type: String,
      default: '',
    },
    title: {
      type: String,
      default: ''
    },
    buttonArray: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {}
  },
  mounted() {
    console.log(this.visible)
  },
  methods: {
    btnClick(item) {
      if (item.clickFn) {
        item.clickFn()
      }
    }
  },
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables.scss';

.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  background-color: rgba(0, 0, 0, 0.5);
  .mask_dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border-radius: 4px;
    &.bg {
      background: #fff url(../../assets/production/index/mask_bg.png) no-repeat 0 0 ;
      background-size: 100% 100%;
    }
    .mask_title {
      display: flex;
      justify-content: space-between;
      padding-left: 16px;
      padding-right: 14px;
      align-items: center;
      height: 44px;
      color: #032944;
      font-size: 14px;
      font-weight: 500;
      .icon_close {
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
      }
    }
    .mask_body {
      padding: 20px;
    }
    .mask_footer {
      .btns {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 56px;
        .btn {
          display: block;
          outline: none;
          width: 82px;
          height: 32px;
          border-radius: 3px;
          border: 1px solid #DEDEE0;
          background-color: #fff;
          line-height: 32px;
          color: #333;
          font-size: 14px;
          font-weight: 500;
          cursor: pointer;
          &:hover {
            border: 1px solid $theme;
            color: $theme;
          }
          &.btn_bg {
            border: none;
            color: #fff;
            background-color: $theme;
            &:hover {
              background-color: #508DFF;
            }
          }
          &.m_l_10 {
            margin-left: 10px;
          }
          .loading_icon {
            color: #fff;
          }
        }
      }
    }
  }
}
</style>
